<template>
  <div>
    <div>sad</div>
    <h3>
      {{ main }}
    </h3>
    <button @click="main.$patch({ count: main.count + 1 })">main1</button>
  </div>
</template>

<script>
import { useCounterStore, useCounterMainStore } from "../../pinia/index";
import { storeToRefs } from "pinia";
import { watchEffect, watch } from "vue";
export default {
  setup() {
    const counter = useCounterStore();
    const main = useCounterMainStore();
    const reactive = storeToRefs(main);
    counter.count++;
    // with autocompletion ✨
    counter.$patch({ count: counter.count + 1 });
    watch(reactive.count, function (val, val1) {
      console.log(val, val1, "asas");
    });
    // or using an action instead
    counter.increment();
    counter.$reset();
    return { counter, red: "red", main };
  },
};
</script>

<style>
button {
  color: v-bind(red);
}
</style>
